<!--
 * @Author: chunlai
 * @Date: 2025-07-02 15:36:03
 * @LastEditTime: 2025-09-11 08:50:38
 * @LastEditors: minsheng_insurance_agency_zhoucl
 * @FilePath: \02.bldinsure\src\components\MsRadios.vue
 * @Description: 全局统一按钮
-->
<template>
  <div class="ms_radios">
    <span
      class="ms_radios-item thin-border"
      v-for="(item, index) in arrList"
      :key="`${type}${index}`"
      :class="{
        active: `${curVal}` === `${item[valueName]}` || isMustChoose(item),
        mg0tb: arrList.length <= 3,
        fang: csstype == '1',
      }"
      @click="handleClick(item)"
    >
      {{ item[labelName] }}
    </span>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "MsRadios",
  props: {
    arrList: {
      type: Array,
      default: () => [],
    },
    curVal: {
      type: [String, Number, Boolean],
      default: () => "",
    },
    type: {
      // 字段key
      type: String,
      default: () => "sex",
    },
    labelName: {
      type: String,
      default: () => "label",
    },
    valueName: {
      type: String,
      default: () => "value",
    },
    uidx: {
      type: Number,
      default: () => 0,
    },
    csstype: {
      type: String,
      default: () => "",
    },
  },
  data() {
    return {};
  },
  computed: {
    ...mapGetters({
      bbrMultList: "insert/bbrMultList",
    }),
    isMustChoose() {
      return function (item) {
        let res = false;
        if (
          item.mustChoose &&
          item.mustChoose == "1" &&
          item.mandatoryConditionsKey == "bbrMaxNum"
        ) {
          const numLen = this.bbrMultList.length;
          if (numLen >= item.mandatoryConditionsValue) {
            res = true;
          }
          return res;
        }
      };
    },
  },
  methods: {
    handleClick(ele) {
      if (ele.mustChoose && ele.mustChoose == "1") {
        return this.isMustChoose(ele) ? "" : this.$toast(`${ele.content}`);
      }
      this.$emit("change", this.type, ele, this.uidx);
    },
  },
};
</script>

<style lang="less" scoped>
.ms_radios {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;

  &-item {
    min-width: 62px;
    height: 26px;
    line-height: 26px;
    padding: 0 10px;
    border-radius: 2px;
    color: #747474;
    background-color: #f7f7f7;
    font-size: 14px;
    text-align: center;
    margin-bottom: 3px;
    margin-left: 6px;
    margin-top: 3px;
    &.thin-border {
      &::after {
        border: 1px solid #e5e5e5;
      }
      &.active {
        color: #f54040;
        background-color: #fff0f0;
        &::after {
          border: 1px solid #f54040;
        }
      }
    }
    &.mg0tb {
      margin-top: 0;
      margin-bottom: 0;
    }
    &.fang {
      min-width: 40px;
      width: 40px;
      padding: 0;
    }
    
  }
}
</style>
